<template>
  <el-table :data="filterTableData" style="width: 100%"  >
  
      <el-table-column label="商品名称" prop="proname" />
      <el-table-column label="商品图片" prop="" >
  
   <template #default="scope"> 
          <img :src="scope.row.img1" height="120" alt="">
        </template>
      </el-table-column>
     
      <el-table-column label="商品分类" prop="category" />
      <el-table-column label="品牌" prop="brand" />
  
      <el-table-column label="详情" prop="proid" />
      <el-table-column label="是否推荐秒杀" >
  
        <template #default="scope">
          <el-switch v-model="scope.row.flag"  @Change="change(scope.$index, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-popconfirm
      confirm-button-text="是"
      cancel-button-text="否"
      :icon="InfoFilled"
      icon-color="#626AEF"
      title="是否删除"
      @confirm="confirmEvent(scope.$index, scope.row)"
      @cancel="cancelEvent"
    >
      <template #reference>
        <el-button>删除</el-button>
      </template>
    </el-popconfirm>
        </template>
        
        
      </el-table-column>
      <!-- scope.$index, scope.row -->
    </el-table>
    <!-- <div class="demo-pagination-block"> -->
      <!-- <div class="demonstration">Change page size</div> -->
      <el-pagination
        v-model:current-page="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    <!-- </div> -->
  </template>
  
  <script setup>
  import { computed, reactive, ref } from 'vue'
  import {goodskill}from'../../api/SHY_flashkill'
  import {onMounted}from 'vue'
  import { ElMessage } from 'element-plus'
  import{ArrData}from'../../stores/second'
  import{prokill}from'../../api/SHY_pro'
  const arrdata = ArrData()
  console.log(arrdata);
  const search = ref('')
  const filterTableData = computed(() =>
    tableData.value.filter(
      (data) =>
        !search.value ||
        data.category.toLowerCase().includes(search.value.toLowerCase())
    )
  )
  
  // const handleDelete = (index, row) => {
  //   console.log(index, row)
  //   tableData.value.splice(index,1)
  // }
  
  let tableData = ref([
  // {
  //     date: '2016-05-03',
  //     name: 'Tom',
  //     address: 'No. 189, Grove St, Los Angeles',
  //     flag: true,
  //   },
  ])
  let arr = ref([])
  
  onMounted(async () => {
    let res = await goodskill('/pro/list',{
      count:1,
      limitNum:10
    })
    console.log(res)
   tableData.value=res.data
  //  arr.value = tableData.value.slice(0, 10)
  
  
  //  console.log(tableData.value);
  })
  const handleClick= async () => {
    let res = await goodskill('/pro/list'
    )
    console.log(res)
   arr.value=res.data
   tableData.value = arr.value.slice(0, 10)
  
  }
  const currentPage2 = ref(1)
  const pageSize2 = ref(100)
  const small = ref(false)
  const background = ref(true)
  const disabled = ref(false)
  // const page = reactive({
  //   count:1
  // })
  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    // page.pageSize2=val
  }
  handleClick()
  
  const handleCurrentChange = (val) => {
    console.log(val)
    // currentPage2=val 
  // console.log(page.pageNum);
      // console.log(page.pageNum);
      tableData.value = arr.value.slice((val - 1) * 10, (val - 1) * 10 + 10)
   
  }
  
  
  import { InfoFilled } from '@element-plus/icons-vue'
  // const proarr=ref([])
  const confirmEvent = (index) => {
    tableData.value.splice(index,1)
    ElMessage({
      message: '删除成功！',
      type: 'success',
    })
  }
  const cancelEvent = () => {
    console.log('cancel!')
  }
  async function change  (index ,row){
    console.log(1);
    let res = await prokill('/pro/updateFlag',{
      proid:'',
      type:'isseckill',
      flag:row
    })
    
    console.log(res);
    setTimeout(() => {
    // const proarr=tableData.value.splice(index,1)
  // arrdata.state.push(tableData.value.splice(index,1)) 
  // arrdata.state=tableData.value.splice(index,1)
  // proarr.push(tableData.value.splice(index,1))
  arrdata.state=tableData.value.splice(index,1)
      // localStorage.setItem('pro',tableData.value.splice(index,1))
      console.log(arrdata.state);
  }, 500)

  }
  </script>